import React from 'react'
import _ from 'lodash'
// npm i lodash or yarn add lodash
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            value: '',
            arrs:[]
        }
        //1.初始化一个防抖函数
        this.debounce = _.debounce(this.debounce, 1000)
    }

    //接受防抖函数的返回值
    debounce = (data) => {
        console.log(data)

    }/*
        react里的on*事件都叫做合成事件,
        底层作了修改,处理了浏览器兼容
        event对象也叫合成对象
        在16版本的时候合成对象在异步函数会丢失属性值
        17版本不会丢失
    */
   headle = (event)=>{
        //合成对象在异步代码里如何丢失数据的
        this.debounce(event.target.value)
        // setTimeout(()=>{
        //     console.log(event)
        // },100)
   }
    changeInput = ({ target }) => {
        this.setState({
            value: target.value
        })
    }
    render() {
        const { value } = this.state
        return <div>
            <input onKeyUp={this.headle} type="text" value={value} onChange={this.changeInput} />
        </div>
    }
}

export default App;